<template>
  <NavBarCmp :leftArrow="true" />

  <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

    <ul v-if="props.searchType === 'movies'">
      <li v-for="movie in list" :key="movie.id" class="list-item" @click="gotoMovieDetail(movie.id)">
        <div class="movie">
          <template v-if="movie.poster">
            <img :src="movie.poster" :alt="movie.name" class="movie-thumb" />
          </template>
          <template v-else>
            <img :src="movie.img" :alt="movie.nm" class="movie-thumb" />
          </template>
          <div class="movie-info">
            <div class="title">
              <h3 v-if="movie.name">{{ movie.name }}</h3>
              <h3 v-else>{{ movie.nm }}</h3>
              <p v-if="movie.ename">{{ movie.ename }}</p>
              <p v-else>{{ movie.enm }}</p>
              <p v-if="movie.catogary">{{ movie.catogary }}</p>
              <p v-else>{{ movie.cat }}</p>
            </div>
            <div class="arrangement">
              <template v-if="movie.release"> {{ movie.release }}</template>
              <template v-else>{{ movie.pubDesc }}</template>
            </div>
          </div>
          <div class="rank">
            <span v-if="movie.score">{{ movie.score }}分</span>
            <span v-else-if="movie.sc">{{ movie.sc }}分</span>
            <span v-else style="color:#666">暂无评分</span>
          </div>
        </div>
      </li>
    </ul>



    <ul v-if="props.searchType === 'cinemas'">
      <li v-for="cinema in list" :key="cinema.id" class="cinema-item">
        <van-row class="title">
          <van-col class="line-width line-ellipsis">
            <template v-if="cinema.info.name"> {{ cinema.info.name }}</template>
            <template v-else> {{ cinema.nm }}</template>
          </van-col>
          <van-col class="price">
            <template v-if="cinema.info.price">
              {{ cinema.info.price }}
            </template>
            <template v-else>
              {{ cinema.sellPrice }}
            </template>
            <span>元起</span>

          </van-col>
        </van-row>
        <van-row class="location">
          <van-col class="line-ellipsis line-width">
            <template v-if="cinema.info.address">{{ cinema.info.address }}</template>
            <template v-else>{{ cinema.addr }}</template>

          </van-col>
        </van-row>
        <van-row class="services">
          <template v-if="cinema.info.tags">
            <van-col v-for="(tag, index) in cinema.info.tags" :key="index"><van-tag plain type="primary">{{ tag
                }}</van-tag></van-col>
          </template>

          <template v-else>
            <van-col v-for="(item, index) in cinema.hallType" :key="index"><van-tag plain type="primary">{{ item
                }}</van-tag></van-col>

          </template>

        </van-row>
      </li>
    </ul>



  </van-list>



</template>


<script setup>



import { useHead } from '@unhead/vue'





import { fetchSearchMoviesOrCinemas } from "@/api/index.js"
import { ref, onMounted, computed } from "vue"
import { useStore } from "@/stores/index.js"

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const keyword = route.query.keyword


console.log("关键词:", keyword);

useHead({
  title: '"' + keyword + '"' + '搜索结果列表' + '-猫眼电影'
})





const store = useStore()

const props = defineProps({
  searchType: {
    type: String,
    default: ''
  }
})




const pageNum = ref(1)
const limit = ref(20)

const offset = computed(() => {
  return (pageNum.value - 1) * limit.value
})


const loading = ref(false)
const finished = ref(false)

const list = ref([])
const total = ref(0)



onMounted(async () => {

  loading.value = true
  const response = await fetchSearchMoviesOrCinemas(props.searchType, keyword, store.currentCity.id, offset.value, limit.value)

  list.value = response
  loading.value = false

});


const onLoad = async () => {

  pageNum.value++
  loading.value = true
  const response = await fetchSearchMoviesOrCinemas(props.searchType, keyword, store.currentCity.id, offset.value, limit.value)

  if (props.searchType === 'movies') {
    list.value.push(...response.movies)
  }
  else if (props.searchType === 'cinemas') {
    list.value.push(...response.cinemas)
  }

  total.value = response.total

  loading.value = false
  if (list.value.length >= total.value) {
    loading.value = false
    finished.value = true
    return
  }

};


const gotoMovieDetail = (id) => {

  router.push({ path: `/movie/${id}` })

};


</script>



<style scoped>
.list {
  background-color: #fff;
  margin-top: 50.5px;
}

.list-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.movie {
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-thumb {
  width: 64px;
  height: 90px;
  margin-right: 10px;
}

.movie-info {
  width: 200px;
  font-size: 13px;
  color: #777;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  align-items: flex-start;
  justify-content: center;
  text-overflow: ellipsis;
}

.movie-info .title {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .title p {
  margin: 0;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.movie-info .title h3 {
  font-size: 17px;
  color: #333;
  margin: 0 0 5px 0;
  padding: 0;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.rank {
  margin-left: 20px;
}

.rank span {
  color: #fa0;
  font-size: 14px;
  font-weight: 400;
}



.movie-info .actors,
.movie-info .arrangement {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 5px;
}

.buy {
  font-size: 13px;
  width: 60px;
  height: 32px;
  line-height: 32px;
}


.version {
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 14px;
  line-height: normal;
  display: inline-block;
  margin-left: 5px;
}


.version.v2d {
  background-image: url("@/assets/version/v2d.png");
}

.version.v2dimax {
  background-image: url("@/assets/version/v2dimax.png");
}

.version.v3d {

  background-image: url("@/assets/version/v3d.png");
}


.version.v3dimax {
  background-image: url("@/assets/version/v3dimax.png");
}


/**** cinemas  ****/
.list .cinema-item {
  border-bottom: 1px solid #eee;
  padding: 10px;
}

.list .cinema-item:last-child {
  border: 0;
}

.list .cinema-item .services .van-tag {
  font-size: 10px;
  margin-right: 5px;
}

.list .title {
  color: #000;
  font-size: 16px;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.list .title .val-col {
  width: 200px;
}

.list .title .price {
  color: #f03d37;
}

.list .title .price span {
  font-size: 11px;
}

.list .location {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
}

.list .location .val-col {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

/*************************** 特色 *******************/
.special {
  padding: 10px;
  color: #777;
}

.special h5 {
  font-size: 14px;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.special .special-btn {
  font-size: 10px;
  /* text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}

.van-grid {
  color: #777;
}

/**** 选中的按钮*****/
.active-btn {
  color: #e54847 !important;
  background: #fcf0f0 !important;
  border: #f03d37 !important;
}

.reset {
  width: 80px;
  height: 36px;
  padding: 5px;
}

.confirm {
  width: 80px;
  height: 36px;
  padding: 5px;
  background-color: #e54847;
  color: #fff !important;
}
</style>
